<template>
	<view>
		<!-- 轮播图 -->
		<u-swiper :list="list3" indicator indicatorMode="line" circular height="350upx"></u-swiper>
		<!-- 培训详情信息 -->
		<view class="details_msg"  >
			<p class="title">{{list.name}}</p>
			<view class="left">
				<p style='font-size: 13px; transform: scale(0.8);margin-left: -18px;' >{{list.time}}</p>
				<p  style='font-size: 13px;'>{{list.region}}</p>
			</view>
			<view class="right">
				<view class="share" @click="open" style="display: flex;">
					<image  src="http://127.0.0.1:7001/public/WHJ/share.png" mode=""></image>
					<span  style='margin-top: 4upx;display: block;'>分享</span>
				</view>
				<u-popup :show="show" mode="center" @close="close" :round="10" :closeable="true">
					<view class="customStyle">
						<view class="share_box">
							<view class="share_box_item" v-for="item in share" :key="item.id" @click="shares">
								<image :src="item.img" mode=""></image>
								<p>{{item.text}}</p>
							</view>
						</view>
					</view>
				</u-popup>
				<view class="btns">
					
					<u-button style='border-radius: 8px;' type="primary" :text="list.btn" class="custom-style" :style="list.btnBg"  @click="show1 = true"></u-button>
				</view>
				<u-modal :show="show1" :title="title" :content='content' :showCancelButton="true" @confirm="confirm"
					@cancel="cancel" class="model1"></u-modal>
				<u-modal :show="show2" :title="title2" :content='content2' :showCancelButton="true"
					@confirm="confirm1(	)" @cancel="cancel1" class="model1"></u-modal>
			</view>
		</view>
		<!-- 注意事项、报名情况、价格 -->
		<view class="advert">
			<view class="advert_msg">
				<p class="title">注意事项：</p>
				<span class="text">
					整个妊娠期间，锻炼强度适度是关键——强度太小起不到锻炼作用，强度太大会过于劳累甚至有危险。
					锻炼强度必须周密计划，所以不要过于苛刻自己。因为孕妇的心率比平常人快15-20次，所以不能
					再劳累了。<br>
					开始时每次运动时间要短，太长会引起肌肉疼痛和疲劳。在开始几周，每次活动15分钟，心率在
					正常范围内，是适当锻炼最良好的开始。在这个心率水平上，会感到应付自如，然后每次增加2分钟，
					直到每次活动量达到30分钟为止。有经验和规律的锻炼。会在连续活动的30分钟内心率仍然保持正常范围内。
				</span>
			</view>
			<view class="advert_msg">
				<p class="title">注意事项：</p>
				<p class="text1">
					培训预期规模：50人
				</p>
				<p class="text1">
					已报名人数：30人
				</p>
			</view>
			<view class="advert_price">
				<view class="advert_price_title">
					<p>价格：</p>
				</view>
				<view class="advert_price_money">
					<p>￥1000.00元<span>(8月6日-8月7日)</span></p>
					<p>￥1000.00元<span>(8月9日-8月10日)</span></p>
					<p>￥1000.00元<span>(8月11日之后，原价)</span></p>
				</view>
			</view>
		</view>
		<!-- 联系方式 -->
		<view class="phone">
			<image  style="width: 15px;height: 15px;margin-left: 40px;margin-top: 25upx;" src="http://127.0.0.1:7001/public/WHJ/hotline.png" mode=""></image>
			<span>咨询热线</span>
			<span>010-2320-260</span>
			<span>020-1522-020</span>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list3: [
					'http://127.0.0.1:7001/public/WHJ/banner.png',
					'http://127.0.0.1:7001/public/WHJ/detailBanner1.png',
				],
				show1: false,
				title: '',
				content: '报名需支付10.00元 或者取消报名',
				title2: '报名成功',
				content2: '请注意通知信息',
				show2: false,
				id: null,
				list: [],
				show: false,
				share: [{
						id: 1,
						img: 'http://127.0.0.1:7001/public/WHJ/CircleFriends.png',
						text: '微信朋友圈'
					},
					{
						id: 2,
						img: 'http://127.0.0.1:7001/public/WHJ/CircleFriends.png',
						text: '微信好友'
					},
					{
						id: 3,
						img: 'http://127.0.0.1:7001/public/WHJ/qq.png',
						text: 'QQ好友'
					},
					{
						id: 4,
						img: 'http://127.0.0.1:7001/public/WHJ/space.png',
						text: 'QQ空间'
					},
					{
						id: 5,
						img: 'http://127.0.0.1:7001/public/WHJ/wb.png',
						text: '新浪微博'
					},
				],
				ids:'',
				FileList:[]
			}
			
		},
		onLoad(options) {
			this.ids=options
			console.log(this.ids)
			this.$api.seOffline(this.ids).then(res=>{
				this.list=res.data
				console.log(this.list)
			})
		
		},
		onShow(){
			this.$api.getpsxintegral().then(res=>{
				this.FileList=res.data
				console.log(this.FileList[0].momeny)
			})
		},
		methods: {
			open() {
				this.show = true
			},
			close() {
				this.show = false
			},
			shares() {
				uni.showToast({
					title: '分享成功',
					icon: 'true'
				})
				this.show = false
			},
			confirm() {
				this.show1 = false
				this.show2 = true
			},
			cancel() {
				this.show1 = false
			},
			confirm1() {
				console.log()
				if(this.FileList[0].momeny>=10){
					this.show2 = false
					console.log(this.list.id)
					if (this.list.state == '0') {
						this.$api.upOffline({
							id: this.list.id,
							state: '1',
							btn: '已经报名',
							btnBg:'background-color: #999;'
						}).then((res) => {
							console.log(res)
							this.$api.seOffline(this.ids).then(res=>{
								this.list=res.data
								console.log(this.list)
							})
						})
					this.FileList.forEach(item=>{
						let a={id:item.id,momeny:item.momeny-10}
						this.$api.putpsxintegral(a).then(res=>{
							this.$api.getpsxintegral().then(res=>{
								this.FileList=res.data
								console.log(this.FileList[0].momeny)
							})
							let b={
								detil:'-10',
								title:'报名',
								text:'余额'
							}
							this.$api.addpsxdetil(b)
							uni.showToast({
								icon: 'false',
								title: '报名成功',
							})
						})
					})
					}else{
						this.$api.upOffline({
							id: this.list.id,
							state: '0',
							btn: '付款报名',
							btnBg:'background-color: #8fc31f;'
						}).then((res) => {
							this.$api.seOffline(this.ids).then(res=>{
								this.list=res.data
								console.log(this.list)
							})
								console.log(res)
						})
					} }else{
					
					uni.showToast({
						icon: 'false',
						title: '余额不足',
					})
					this.show2 = false
					this.$api.upOffline({
						id: this.list.id,
						state: '0',
						btn: '付款报名',
						btnBg:'background-color: #8fc31f;'
					}).then((res) => {
						this.$api.seOffline(this.ids).then(res=>{
							this.list=res.data
							console.log(this.list)
						})
							console.log(res)
					})	
				}
		
			},
			cancel1() {
				this.show2 = false
			}
		}
	}
</script>

<style>
	page {
		background-color: #fafafa;
	}

	.details_msg {
		width: 100%;
		height: 200upx;
		box-shadow: 0 0 20upx #ddd;
	}

	.details_msg .title {
		text-align: center;
		padding-top: 20upx;
		font-size: 36upx;
		padding-bottom: 10upx;
	}

	.details_msg .left {
		width: 320upx;
		height: 120upx;
		margin-left: 20upx;
		font-size: 30upx;
		line-height: 54upx;
		color: #333;
		float: left;
	}

	.details_msg .right {
		width: 370upx;
		height: 120upx;
		float: right;
		display: flex;
		justify-content: space-between;
	}

	.details_msg .right .share {
		width: 120upx;
		height: 80upx;
		margin-top: 30upx;
	}

	.details_msg .right .share image {
		width: 40upx;
		height: 40upx;
	}

	.details_msg .right .share span {
		color: #999;
		font-size: 28upx;
		margin-left: 10upx;
	}

	.custom-style {
		width: 200upx;
		height: 70upx;
		border: none;
		margin-right: 20upx;
		margin-top: 20upx;
	}

	.advert {
		width: 95%;
		height: 840upx;
		margin: 0 auto;
		border-bottom: 1px solid #999;
	}

	.advert .title {
		margin-top: 20upx;
		color: #333;
		margin-bottom: 20upx;
	}

	.advert .text {
		font-size: 26upx;
		color: #333;
	}

	.advert .text1 {
		font-size: 26upx;
		color: #333;
		margin-left: 40upx;
		padding-bottom: 10upx;
	}

	.advert_price {
		width: 100%;
		height: 180upx;
	}

	.advert_price_title {
		padding-top: 20upx;
		float: left;
		width: 100upx;
		height: 100%;
		color: #333;
	}

	.advert_price_money {
		margin-top: 20upx;
		float: left;
	}

	.advert_price_money p {
		font-size: 32upx;
		color: #8fc31f;
	}

	.advert_price_money span {
		margin-left: 20upx;
		color: #333;
		font-size: 26upx;
	}

	.phone {
		width: 80%;
		height: 100upx;
		margin: 0 auto;
	}

	.phone image {
		width: 40upx;
		height: 40upx;
		margin-top: 20upx;
		float: left;
	}

	.phone span {
		font-size: 22upx;
		margin-left: 10upx;
		float: left;
		margin-top: 20upx;
		color: #999;
	}

	.customStyle {
		width: 550upx;
		height: 400upx;
	}

	.share_box {
		width: 500upx;
		height: 300upx;
		margin: 90upx auto 0;
		display: flex;
		flex-wrap: wrap;
		
	}
	
	.share_box_item {
		width: 33.3%;
		height: 50%;
	}

	.share_box_item image {
		width: 70upx;
		height: 70upx;
		display: block;
		margin: 0 auto;
	}

	.share_box_item p {
		color: #333;
		font-size: 30upx;
		text-align: center;
		margin-top: 10upx;
	}

	.model1 {
		text-align: center;
	}

	::v-deep .u-modal__content__text[data-v-713d0fd3] {
		color: red;
	}
</style>
